<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #app{
            text-align: center;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap{
            list-style: none;
            width: 300px;
            border: 1px solid;
        }
        .wrap li{
            display: flex;
        }
        .wrap li span{flex: 1}
        .wrap li button{flex: 1}
    </style>
</head>
<body>
    <div id="app">
        <!--<span style="color: green">{{msg}}</span> <br>-->
        <button @click="addFn">add</button>
        <ul class="wrap">
            <li v-for="(val,key,index) in obj" :key="index">
                <span>{{key}}:{{val}}</span>
                <button @click="delFn(key)">del</button>
            </li>
        </ul>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            obj:{
                name:"达姆",
                wife:"冬雨",
                age:18,
                son:""
            },
            msg:"xxx"
        },
        methods:{
            delFn(key){
                //key : 变量
                // delete this.obj[key];
                // Vue.delete(this.obj,key) //静态方法
                this.$delete(this.obj,key)  //实例方法
                // this.msg="yyy" //连带渲染
            },
            addFn(){
                this.obj.son="小乐"
                // Vue.set(this.obj,"son","小乐") //静态方法
                // this.$set(this.obj,"son","小乐")  //实例方法
            }
        }
    })
</script>
</html>